<template>
	<view class="cu-form-group">
		<view class="grid-square">
			<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
				<image :src="imgList[index]" mode="aspectFill"></image>
				<view class="cu-tag u-flex u-col-center u-row-center" @tap.stop="DelImg" :data-index="index">
					<u-icon name="close" size="30rpx" color="#ccc"></u-icon> 
				</view>
			</view>
			<view class="solids u-flex u-col-center u-row-center" @tap="ChooseImage" v-if="imgList.length<countData">
				<u-icon name="plus" size="60rpx" color="#ccc"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				imgList:[] ,//图片上传
				$baseUrl:"",
				imgArr:[],
				countData:9
			}
		},
		props:{
			count: {
				type: Number,
				default: 9
			},
		},
		created() {
			this.$baseUrl = this.baseUrl
		},
		methods:{
			// 图片上传
			ChooseImage() {
				if(this.count){
					this.countData=this.count
				}else{
					this.countData=9
				}
				let _this = this
				uni.chooseImage({
					count:_this.countData, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera' ], //从相册选择
					success: (res) => {
						res.tempFilePaths.forEach((item)=>{
							uni.uploadFile({
								url: _this.$baseUrl+'/ajax/appfile.ashx', //服务器地址
								fileType: "image", //ZFB必填,不然报错
								filePath: item, //这个就是我们上面拍照返回或者先中照片返回的数组
								name: 'file',
								formData: {
									'ak': _this.$store.state.token								
								},
								success: (uploadFileRes) => {
									if (_this.imgArr.length >= _this.countData) //限制
										return uni.showToast({
											title: '最多上传' + _this.countData + '张图片',
											icon: 'none',
											position: 'bottom'
										});
									_this.imgArr.push(JSON.parse(JSON.parse(uploadFileRes.data).Data.filelist)[0]);
									if(_this.imgList.length != 0){ 
										_this.$emit('chooseImage',_this.imgArr,_this.gIndex)
									}
								},
								fail:(err)=>{
									console.log(err)
								}
							});
						})
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths)
						} else {
							this.imgList = res.tempFilePaths
						}
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				let _this = this
				uni.showModal({
					title: '提示',
					content: '确定要删除吗？',
					cancelText: '取消',
					confirmText: '确定',	
					success: res => {
						if (res.confirm) {
							_this.imgList.splice(e.currentTarget.dataset.index, 1)
							_this.imgArr.splice(e.currentTarget.dataset.index, 1)
							_this.$emit('delImg',_this.imgArr)
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 图片上传
	.cu-form-group{
		.grid-square{
			width: 100%;
			display: grid;
			grid-template-columns: repeat(3,33.33%);
			grid-row-gap: 50rpx;
			.bg-img{
				position: relative;
				width: 184rpx;
				height: 184rpx;
				overflow: hidden;
				border-radius: 20rpx;
				image{
					width: 184rpx;
					height: 184rpx;
				}
				.cu-tag{
					z-index: 10;
					position: absolute;
					top: 0;
					right: 0;
					width: 60rpx;
					height: 60rpx;
					border-radius: 0 20rpx 0 100%;
					background-color: rgba(0,0,0,.5);
				}
			}
			.solids{
				width: 184rpx;
				height: 184rpx;
				border-radius: 20rpx;
				border: 1px solid #cccccc;
			}
		}
	}
	
</style>
